<template>
	<view>
		<view class="uni-padding-wrap uni-common-pb">
			<view class="uni-card">
				<view class="uni-list">
					<view class="uni-list-cell uni-collapse" v-for="(item,index) in costList" :key="index">
						<view class="uni-list-cell-navigate uni-navigate-right" hover-class="uni-list-cell-hover"
						@click="toRateDetail(item)"
						>
							{{item.name}} | {{item.rate}} | {{item.charge}} |  
							<template v-if="item.defaultType === '1'">默认</template>
						</view>
					</view>
				</view>
				<view class="button-sp-area">
					<button type="primary" plain="true" @click="addCost()">新增费率</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				costList:[]
			}
		},
		onShow() {
			this.loadCostList();
		},
		methods:{
			addCost(){
				uni.navigateTo({
					url:`/pages/cost/addCost`,
				})
			},
			loadCostList(){
				const that = this;
				// this.$api.msg("加载列表");
				this.$net.getCostList().then(res => {
					that.costList = res.data
					// console.log(res.data);
				})
			},
			toRateDetail(item){
				uni.navigateTo({
					url:`/pages/cost/addCost?id=${item.id}&name=${item.name}&rate=${item.rate}&charge=${item.charge}&defaultType=${item.defaultType}`,
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		height: auto;
		min-height: 100%;
		background-color: #EBEBEB;
	}

	.uni-card {
		box-shadow: none;
	}

	.uni-list:after {
		height: 0;
	}

	.uni-list:before {
		height: 0;
	}

	.uni-hello-text {
		word-break: break-all;
	}
</style>
